<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
    <title>管理系统</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#login_btn").click(function () {
                $.post("user/loginPost", $("#login_form").serialize(), function (data) {
                    if (data.metaInfo.status == 200) { //登陆成功
                        location.href = "index.html";
                    } else {
                        var err_msg_block = $("#err_msg_block");
                        err_msg_block.css("display", "block");
                        err_msg_block.html(data.metaInfo.msg);
                    }
                });
            });

            //验证码回车提交
            //解决Firefox下回车穿透
            var name = "";
            $("#password").keyup(function (event) {
                if (event.keyCode == 13) {
                    if ($(this).val() == name) {
                        $("#login_btn").click();
                    }
                }
            }).keydown(function (event) {
                if (event.keyCode == 13) {
                    name = $(this).val();
                }
            });
            $("#username").keyup(function (event) {
                if (event.keyCode == 13) {
                    if ($(this).val() == name) {
                        $("#login_btn").click();
                    }
                }
            }).keydown(function (event) {
                if (event.keyCode == 13) {
                    name = $(this).val();
                }
            });

            var name = "";
            $("#password").keyup(function (event) {
                if (event.keyCode == 13) {
                    if ($(this).val() == name) {
                        $("#login_btn").click();
                    }
                }
            })
            $("#password").keydown(function (event) {
                if (event.keyCode == 13) {
                    name = $(this).val();
                }

            });

        })
    </script>
</head>
<body>
<div class="container" id="submitForm" style="width:400px">
    <div style="margin-top: 20px"></div>
    <div style="text-align: center">
        <img src="pic/logo.jpg" width="70%"/>
    </div>
    <h1 style="text-align: center;margin-top:30px;">科研管理系统</h1>
    <form action="" id="login_form" method="post" accept-charset="utf-8">
        <div class="form-group">
            <label for="username">用户名：</label>
            <span class="glyphicon glyphicon-user"></span>
            <input type="text" name="username" class="form-control" id="username" placeholder="请输入用户名"/>
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <span class="glyphicon glyphicon-lock"></span>
            <input type="password" name="password" class="form-control" id="password"
                   placeholder="请输入密码"/>
        </div>
        <hr/>

        <!-- 出错显示的信息框 -->
        <div class="alert alert-info alert-dismissible" role="alert" id="err_msg_block" style="display: none;">
            <button type="button" class="close" data-dismiss="alert" id="err_msg_block_x">
                <span id="err_msg_block_x_y">&times;</span>
            </button>
            <strong>状态提示</strong>
        </div>

        <div class="form-group" style="text-align: center;">
            <input class="btn btn btn-primary" type="button" value="登录" id="login_btn">
        </div>

        <div class="form-group" style="text-align: center;margin-top: 20px">
            <a href="regist.html">没有账号？点击注册</a>
        </div>
    </form>
</div>
</body>
</html>